<!-- 添加手机号 -->
<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="onConfirm"
    title="维护"
    unmount-on-close
    :mask-closable="false"
    class="modal-dialog-wrapper"
    width="45vw"
  >
    <div style="width: 100%">
      <a-alert class="a-alert">
        <template #icon>
          <icon-exclamation-circle />
        </template>
        <div class="alert-item">上传格式：支持jpg、jpeg、png、doc、docx、pdf格式</div>
      </a-alert>

      <!-- 上传组件 -->
      <upload-attach class="upload-attach" v-model="form.contract.contractFileId" @change="onUploadSuccess" />
    </div>

    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup name="MaintenanceContract">
  import { ref } from 'vue'
  import { getContractNo } from '@/api/order/czsOrder.js'
  import { Message } from '@arco-design/web-vue'
  import { uploadContractAPI } from '@/api/order/sOrder'

  const showModal = ref(false)
  const emit = defineEmits(['ok'])
  // form 信息
  const form = ref({
    contract: {}, // 合同信息
    id: '', // 订单id
  })
  const show = (record, orderId) => {
    // 显示弹窗
    showModal.value = true

    setTimeout(() => {
      // 更新 form 信息
      form.value = {
        id: orderId,
        contract: {
          id: record.id,
          refId: record.refId,
          contractType: record.contractType,
          offLineContractTypeName: record.offLineContractTypeName,

          contractNo: record.contractNo,
          contractName: record.name,
          contractFileId: record.contractFileId,
        },
      }
    }, 0)
  }
  // 上传完成
  const onUploadSuccess = (_, fileItem) => {
    // 更新合同文件名
    form.value.contract.contractName = fileItem.name
  }
  const onClose = () => {
    showModal.value = false
    form.value.contract = {}
  }

  // 生成合同编号
  const generateContractNo = () => {
    return new Promise((resolve) => {
      getContractNo({ type: form.value.contract.contractType }).then((res) => {
        form.value.contract.contractNo = res.result
        resolve()
      })
    })
  }

  const onConfirm = async () => {
    // 如果没有合同编号，先生成合并编号
    if (!form.value.contract.contractNo) {
      await generateContractNo()
    }
    // 上传合同
    uploadContractAPI(form.value).then((res) => {
      console.log(res)
      Message.success('操作成功')
      showModal.value = false
      form.value.contract = {}
      emit('ok')
    })
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  :deep(.arco-row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  :deep(.arco-row-align-start) {
    padding: 0 !important;
  }
  :deep(.arco-col) {
    padding: 0 10px !important;
  }
  .a-alert {
    font-size: 14px;
    font-weight: 400;
    color: #1d2129;
    margin-bottom: 20px;
    margin-right: 12px;
    flex: 1;
  }
</style>
